<!--
 * @Author: ckk
 * @Date: 2022-08-16 13:38:19
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-11-08 17:18:06
 * @Description: 图片标题
-->
<template>
 <div class="operation-place">
  <div class="operation-swiper">
    <yj-mob-swipe class="my-swipe" :autoplay="5000" @change="onChange">
      <yj-mob-swipe-item v-for="(item, index) in adList" :key="index">
        <img :src="item.posterUrl" alt  @click="goLink(item.linkUrl)" class="swiper-img"/>
      </yj-mob-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }} / {{adList.length}}</div>
      </template>
    </yj-mob-swipe>

  </div>
  <div class="operation-content">
    <div :class="index === 0 ? 'operation-item operation-item1': 'operation-item'" v-for="(item, index) in operationList" :key="index">
      <img alt="" :src="item.bgImage" class="bgImage" @click="goLink(item.linkUrl)">
      <div class="item-content">
        <p class="item-title">{{item.title}}</p>
        <p class="item-desc">{{item.desc}}</p>
        <div class="item-btntext" @click="goLink(item.url, 1)">{{item.btntext}}<yj-mob-icon name="arrow" /></div>
      </div>
    </div>
  </div>

 </div>
</template>

<script>
import { Swipe, SwipeItem, Icon } from 'yj-mob-ui';
import { getLink } from '@/common/comfun';
export default {
  name: 'operationPlace',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon
  },
  props: {
    datas: Object
  },
  data () {
    return {
      current: 0,
      adList: [],
      operationList: []
    };
  },
  methods: {
    // 跳转链接
    goLink (url, type) {
      if (type === 1) {
        if (getLink(url)) {
          window.location.href = getLink(url);
        }
      } else {
        window.location.href = url;
      }
    },
    // 轮播切换
    onChange (index) {
      this.current = index;
    },
    /**
     * @author: ckk
     * @description:获取轮播数据
     * @return {*}
     */
    getSwiperList (code) {
      const grades = [],
      studyStageCode = [],
      userList = JSON.parse(decodeURIComponent(localStorage.getItem('auth_token'))).userinfo,
      userInitInfo = JSON.parse(localStorage.getItem('userInitInfo'));
      grades.push(localStorage.getItem('gradeCode'));
      studyStageCode.push(userInitInfo.stageCode);
      const userInfo = {
        roles: userList.usertype,
        grades: grades,
        platform: JSON.parse(localStorage.getItem('loginDataMobile')).Platform,
        studyStageCode: studyStageCode,
        area: userList.areaId,
        school: userList.orgId
      },
      // eslint-disable-next-line
      recommend = new window.nbocSdk.recommendSdk(userInfo);
      // 创建一个推荐位
      recommend.createRecommend(code).then((res) => {
        if (res.code === 200) {
          this.adList = res.list;
        }
      });
    }
  },
  created () {
    console.log(this.datas, '轮播数据');
    this.getSwiperList(this.datas.setStyle.imageList[0].apiUrl);
    this.operationList = this.datas.setStyle.imageList.splice(1, this.datas.setStyle.imageList.length - 1);
    console.log(this.operationList, '书籍');
  }
};
</script>

<style scoped lang="scss">
.operation-place{
  display: flex;
  height: 196px;
  justify-content: space-between;
  padding:0 16px 14px 16px;
  .operation-swiper{
    width: 164px;
    height: 196px;
    border-radius: 6px;
    overflow: hidden;
  }
  .my-swipe{
    height: 100%;
  }
  .swiper-img{
    width: 164px;
    height: 196px;
  }
  .operation-content{
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    .operation-item{
      width:164px;
      height: 93px;
      flex-shrink: 0;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      .bgImage{
        width:100%;
        height: 100%;
        display: block;
      }
    }
    .item-content{
      width:164px;
      height: 93px;
      position: absolute;
      left:0;
      top:0;
      box-sizing: border-box;
      padding:8px 12px;
      display: flex;
      flex-direction: column;
    }
    .item-title{
      height: 25px;
      font-size: 16px;
      font-family: PingFang SC-Heavy, PingFang SC, sans-serif;
      font-weight: 800;
      color: #000000;
      line-height: 25px;
    }
    .item-desc{
      height:30px;
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      line-height: 30px;
      color: #888888;
      text-overflow: ellipsis; /* 溢出显示省略号 */
      overflow: hidden; /* 溢出隐藏 */
      white-space: nowrap;
    }
    .item-btntext{
      height: 25px;
      font-size: 12px;
      font-family: PingFang SC-Medium, PingFang SC, sans-serif;
      font-weight: 500;
      line-height: 25px;
      color: #CCCCCC;
    }
    .operation-item1{
      margin-bottom:12px;
    }
  }
}
</style>
